<template>
	<span id="column-element">
		<template v-if="item && item.kind.toString() === 'input'">
			<el-input v-model="model[item.prop]" size="medium" style="width: 100%;"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"
				@change="handleChange(item.prop, model,scope ? scope.$index : null)"
				@blur="handleBlur(item.prop, model,scope ? scope.$index : null)"></el-input>
		</template>
		<template v-if="item && item.kind.toString() === 'number'">
			<el-input v-model.number="model[item.prop]" size="medium" style="width: 100%;"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"
				@change="handleChange(item.prop, model,scope ? scope.$index : null)"
				@blur="handleBlur(item.prop, model,scope ? scope.$index : null)"></el-input>
		</template>
		<template v-if="item && (item.kind.toString() === 'date' || item.kind.toString() === 'time' || item.kind.toString() === 'datetime')">
			<el-date-picker v-model="model[item.prop]" :type="item.kind" placeholder="请选择日期/时间" value-format="timestamp"
				:disabled="Boolean(item.disabled)" :picker-options="dateOptions" :clearable="!Boolean(item.disabled)"></el-date-picker>
		</template>
		<template v-if="item && (item.kind.toString() === 'daterange' || item.kind.toString() === 'monthrange')">
			<el-date-picker v-model="model[item.prop]" start-placeholder="开始日期/月份" range-separator="至" end-placeholder="结束日期/月份"
				:type="item.kind" value-format="timestamp" :picker-options="rangeOptions"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"></el-date-picker>
		</template>
		<template v-if="item && item.kind.toString() === 'week'">
			<el-date-picker v-model="model[item.prop]" type="week" placeholder="请选择周" style="width: 236px"
				:disabled="Boolean(item.disabled)" :format="weekFormat" :picker-options="weekOptions"
				:clearable="!Boolean(item.disabled)" @change="showDate" />
		</template>
		<template v-if="item && item.kind.toString() === 'month'">
			<el-date-picker v-model="model[item.prop]" :type="item.kind" format="yyyy 年 MM 月" placeholder="请选择月" value-format="yyyy-MM"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)" />
		</template>
		<template v-if="item && item.kind.toString() === 'season'">
			<el-quarter-picker v-model="model[item.prop]" placeholder="请选择季度"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)" />
		</template>
		<template v-if="item && item.kind.toString() === 'select'">
			<el-select v-model="model[item.prop]" placeholder="请选择" style="width: 100%; height: 100%;"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"
				@change="handleChange(item.prop, model,scope ? scope.$index : null)">
				<template v-for="options in item.selectOptions">
					<el-option :label="options.label" :value="options.value" style="width: 100%; height: 100%;"></el-option>
				</template>
			</el-select>
		</template>
		<template v-if="item && item.kind.toString() === 'preinput'">
			<el-input v-model="model[item.body]" :disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"
				placeholder="请输入内容">
				<el-select slot="prepend" v-model="model[item.header]" :disabled="Boolean(item.disabled)" placeholder="请选择"
					:style="item.style ? item.style : {width: '110px'}" style="height: 100%">
					<template v-for="options in item.selectOptions">
						<el-option :label="options.label" :value="options.value" :style="item.style ? item.style : {width: '110px'}"
							style="height: 100%"></el-option>
					</template>
				</el-select>
			</el-input>
		</template>
		<template v-if="item && item.kind.toString() === 'appendinput'">
			<el-input v-model="model[item.prop]" placeholder="请输入内容"
				:disabled="Boolean(item.disabled)" :clearable="!Boolean(item.disabled)"
				@change="handleChange(item.prop, model,scope ? scope.$index : null)"
				@blur="handleBlur(item.prop, model,scope ? scope.$index : null)">
				<template slot="append" style="width: 85px">{{item.append}}</template>
			</el-input>
		</template>
		<template v-if="item && item.kind.toString() === 'radio'">
			<el-radio v-model="model[item.prop]" :disabled="Boolean(item.disabled)" :label="model[item.prop]" border>
				{{item.label}}
			</el-radio>
		</template>
		<template v-if="item && item.kind.toString() === 'checkbox'">
			<el-checkbox v-model="model[item.prop]" :disabled="Boolean(item.disabled)" :label="model[item.prop]" border></el-checkbox>
		</template>
	</span>
</template>

<script>
export default {
	name: "column-element",
	props: {
		model: {
			type: Object,
			default() {
				return {};
			}
		},
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		scope: {
			type: Object,
			default() {
				return {};
			}
		},
		colWidth: {
			type: Number,
			default: 8
		}
	},
	data() {
		return {
			weekFormat: "",
			dateOptions: this.constants.date.dateOptions,
			weekOptions: this.constants.date.weekOptions,
			rangeOptions: this.constants.date.rangeOptions
		};
	},

	methods: {
		showDate() {
			if (this.item.kind.toString() === "week") {
				this.model[this.item.prop] = this.dateUtils.minusDays(1, this.model[this.item.prop]);
				let weekDay = this.model[this.item.prop];
				let startDate = this.dateUtils.toLocalDateString(weekDay);
				let endDate = this.dateUtils.toLocalDateString(this.dateUtils.plusDays(6, weekDay));
				if (startDate && endDate) {
					this.weekFormat = startDate + " 至 " + endDate;
				}
			}
		},
		handleChange(prop, row, rowIndex) {
			this.$emit("handle-change", prop, row, rowIndex);
		},
		handleBlur(prop, row, rowIndex) {
			this.$emit("handle-blur", prop, row, rowIndex);
		}
	}
};
</script>

<style scoped>

</style>
